import Vue from 'vue'
import App from './App.vue'
import router from './router/router'
import store from './store'
import axios from 'axios'//数据请求
import './assets/css/global.css'
import './assets/css/icon/iconfont.css'
import ElementUI, { Message } from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import plTable from 'pl-table'
import 'pl-table/themes/index.css'
import 'pl-table/themes/plTableStyle.css'
import * as echarts from 'echarts'
import UmyUi from 'umy-ui';
//import 'umy-ui/lib/theme-chalk/index.css';
import SvgIcon from './components/print/SvgIcon'
import ExTableColumn from 'ex-table-column';
import highcharts from 'highcharts'
import highcharts3d from 'highcharts/highcharts-3d'

highcharts3d(highcharts)
Vue.component('svg-icon', SvgIcon)
Vue.use(UmyUi);
Vue.prototype.$echarts = echarts
Vue.use(plTable);
Vue.use(ElementUI);
Vue.component(ExTableColumn.name, ExTableColumn);

//Vue.prototype.$imageUrl = 'http://192.168.1.96:8088/image/' //图片的接口地址
Vue.prototype.$imageUrl = 'https://www.gdsico.com/image/' //图片的接口地址
//Vue.prototype.$downLoadUrl = 'http://192.168.1.96:8088'  //图片服务器下载文件访问的地址
Vue.prototype.$downLoadUrl = 'https://www.gdsico.com/'//正式的地址

var url = '';//window.location.href.split("8088/")[0] + '8083' //8088为前端，8083为后端
//url = 'http://192.168.1.96:8083/api/'; //测试服
url = 'http://127.0.0.1:8083/api/'; //本地
//url = 'https://www.gdsico.com/api/'; //正式
Vue.prototype.baseURL = url // 打包

let instance = axios.create({
  //baseURL: 'http://192.168.1.96:8083/api/',// 内网服务器
  //baseURL: 'https://www.gdsico.com/api/',  // 正式打包
  baseURL: 'http://127.0.0.1:8083/api/', //本地测试
  timeout: 300000,
  withCredentials: true,  // 用户凭证，是指cookie,http身份验证等...// false: 默认，在跨域是不携带， true 在跨域时携带
});

let ajaxTimes = 0;
let loading = null;

// 请求拦截,判断用户当前的状态
instance.interceptors.request.use(config => {
  config.headers.token = window.sessionStorage.getItem('token');
  // 请求时的节流(显示加载数据的图标)
  ajaxTimes++;
  loading = ElementUI.Loading.service({
    lock: true,
    text: "Loading",
    spinner: 'el-icon-loading',
    background: 'rgba(0, 0, 0, 0.6)',
    target: config.headers.loadingTarget || 'body',  //遮罩层背景色
  })
  return config;
}, err => {
  ajaxTimes = 0;
  loading.close();
  Message.error("系统服务请求失效，请刷新重试，如长时间不能操作，请联系客服！")
  return Promise.reject(err);
});

// 响应拦截
instance.interceptors.response.use(response => {
  ajaxTimes--;
  if (ajaxTimes === 0) {
    loading.close();
  }
  return response;
}, err => {
  ajaxTimes = 0;
  loading.close();
  Message.error("系统服务请求失效，请刷新重试，如长时间不能操作，请联系客服！")
  return Promise.reject(err);
});

Vue.prototype.$http = instance;
Vue.prototype.$httpTo = '';

// v-dialogDrag: 【对话框弹窗】拖拽属性
Vue.directive('dialogDrag', {
  bind(el, binding, vnode, oldVnode) {
    const dialogHeaderEl = el.querySelector('.el-dialog__header');
    const dragDom = el.querySelector('.el-dialog');
    //dialogHeaderEl.style.cursor = 'move';
    // cssText 的本质就是设置 HTML 元素的 style 属性值。
    dialogHeaderEl.style.cssText += ';cursor:move;'  //光标符号
    dragDom.style.cssText += ';top:0px;'

    // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
    // 判断浏览器的兼容性
    const sty = (function () {
      if (window.document.currentStyle) {
        // currentStyle 只兼容IE 不兼容火狐和谷歌
        return (dom, attr) => dom.currentStyle[attr];
      } else {
        // getComputedStyle  兼容1火狐谷歌，不兼容IE
        return (dom, attr) => getComputedStyle(dom, false)[attr];
      }
    })()

    // 按下鼠标按钮执行
    dialogHeaderEl.onmousedown = (e) => {
      // 鼠标按下，计算当前元素距离可视区的距离
      // (clientX, clientY):  鼠标在浏览器的坐标
      // offsetLeft 元素距离浏览器边框的位置
      const disX = e.clientX - dialogHeaderEl.offsetLeft;
      const disY = e.clientY - dialogHeaderEl.offsetTop;

      const screenWidth = document.body.clientWidth; // body 当前宽度
      const screenHeight = document.documentElement.clientHeight; // 可见区域高度(应为body高度，可某些环境下无法获取) 

      const dragDomWidth = dragDom.offsetWidth; // 对话框宽度
      const dragDomheight = dragDom.offsetHeight; // 对话框高度

      const minDragDomLeft = dragDom.offsetLeft;
      const maxDragDomLeft = screenWidth - dragDom.offsetLeft - dragDomWidth;

      const minDragDomTop = dragDom.offsetTop;
      const maxDragDomTop = screenHeight - dragDom.offsetTop - dragDomheight;

      // 获取到的值带px 正则匹配替换
      let styL = sty(dragDom, 'left');
      let styT = sty(dragDom, 'top');

      // 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px
      if (styL.includes('%')) {
        styL = +document.body.clientWidth * (+styL.replace(/\%/g, '') / 100);
        styT = +document.body.clientHeight * (+styT.replace(/\%/g, '') / 100);
      } else {
        styL = +styL.replace(/\px/g, '');
        styT = +styT.replace(/\px/g, '');
      };

      document.onmousemove = function (e) {
        // 通过事件委托，计算移动的距离 
        let left = e.clientX - disX;
        let top = e.clientY - disY;

        // 边界处理
        if (-(left) > minDragDomLeft) {
          left = -(minDragDomLeft);
        } else if (left > maxDragDomLeft) {
          left = maxDragDomLeft;
        }

        if (-(top) > minDragDomTop) {
          top = -(minDragDomTop);
        } else if (top > maxDragDomTop) {
          top = maxDragDomTop;
        }

        // 移动当前元素  
        dragDom.style.cssText += `;left:${left + styL}px;top:${top + styT}px;`;
      };

      document.onmouseup = function (e) {
        document.onmousemove = null;
        document.onmouseup = null;
      };
      return false;
    }
  }
});

Vue.config.productionTip = false;

// 事件总线
Vue.prototype.$bus = new Vue();

//全局修改默认配置，点击空白处不能关闭弹窗
ElementUI.Dialog.props.closeOnClickModal.default = false;

new Vue({
  router,
  store,
  render: h => h(App),
}).$mount('#app')
